<template>
    <view>
        <u-popup v-model="show" :mode="mode" @close="closeSku" closeable :border-radius="borderRadius">
            <view class="sku-panel" style="">
                <view class="goods-info flex-row  p-top-20 p-botoom-40">
                    <image src="../../../static/default-avatar.jpg" class="borderRadius-10"></image>
                    <view class="m-left-20 flex-colum jc-between flex-2">
                        <view class="size-32 color-0">大白菜</view>
                        <view class="size-24 color-9" v-if="selectText">
                            已选 {{selectText}}
                        </view>
                        <view class="flex-row jc-between">
                            <view class=" size-24  flex-row ai-end font-bold " style="color: #E71943;">￥<text
                                    class="size-32">
                                    44 </text>
                                <view class="color-9 font-normal" style="text-decoration: line-through;">
                                    ￥110
                                </view>
                            </view>
                            <u-number-box v-model="value" @change="valChange"></u-number-box>
                        </view>
                    </view>
                </view>
                <scroll-view scroll-y="true" style="height: 480rpx;">
                    <view v-if="!skuItem.is_hide" class="sku-container" v-for="(skuItem,skuIndex) in list">
                        <view class="title font-bold size-30 p-botoom-10">
                            {{skuItem.title}} <text v-if="skuItem.unit" class="size-24">/{{skuItem.unit}}</text>
                        </view>
                        <view class="sku-item flex-row flex-warp">
                            <text class="tag bg-f5 borderRadius-10 text-center "
                                :style="{'color':tagItem.checked?'#fff':'','background':tagItem.checked?'#74BEFF':''}"
                                v-for="(tagItem,tagIndex) in skuItem.sku"
                                @click="selectSku(tagIndex,skuIndex)">{{tagItem.name}}</text>
                        </view>
                    </view>
                </scroll-view>
            </view>
            <view class="sku-btn flex-row">
                <view class="lump">加入购物车</view>
                <view class="lump">立即购买</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        props: {
            mode: {
                type: String,
                default: 'bottom'
            },
            borderRadius: String,
        },
        data() {
            return {
                show: false,
                value: 1,
            }
        },
        computed: {
            list() {
                let list = this.$store.getters.getSkus()
                if (list) {
                    return list
                } else {

                    return []
                }
            },
            selectText() {
                let str = ''
                if (this.list.length == 0) {
                    return
                }
                this.list.map((item, index) => {
                    item.sku.map((skuItem, skuIndex) => {
                        if (skuItem.checked) {
                            str += skuItem.name + ' '
                        }

                    })

                })
                return str
            }
        },

        methods: {
            openSku() {
                this.show = true
            },
            selectSku(value, parentIndex) {
                this.list.map((item, index) => {
                    if (index === parentIndex) {
                        item.sku.map((skuItem, skuIndex) => {
                            if (skuIndex == value) {
                                skuItem.checked = !skuItem.checked
                                if (index == 0){
                                    this.initNewList(skuItem, skuItem.checked,index)
                                }
                            } else {
                                skuItem.checked = false
                            }
                        })
                    }
                })
            },
            closeSku() {
                this.show = false
            },
            initNewList(skuItem, checked,skuIndex) {
                this.list.map((item, index) => {
                    if (skuItem.haveChildId == item.havePraentSkuId && skuItem.checked) {
                        item.is_hide = true
                    } else {
                        item.is_hide = false
                    }
                   if(skuIndex!=index){
                       item.sku.map((typeItem,typeIndex)=>{
                           typeItem.checked=false
                       })
                   } 
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .sku-panel {
        padding: 40rpx 30rpx;

        .goods-info {
            image {
                width: 140rpx;
                height: 140rpx;
            }
        }

        .sku-container {
            margin-bottom: 20rpx;

            .sku-item {
                .tag {
                    padding: 10rpx;
                    border: 1px solid #eee;
                    margin: 4rpx 10rpx;
                    width: 200rpx;
                }

            }

            .current {
                color: #2979FF;
                border: 1px solid #2979FF;
                background: $color-theme;
            }
        }


    }

    .sku-btn {
        .lump {
            width: 50%;
            padding: 30rpx;
            color: #fff;
            text-align: center;
        }

        view:nth-child(1) {
            background: $color-car;
        }

        view:nth-child(2) {
            background: $color-buy;
        }
    }
</style>
